<template>
    <base-breadcrumb>
        <div class="about-master-container">
            <a-card v-loading="loading">
                <title-name title="基本信息"></title-name>
                <a-form-model :model="form" ref="formRules" :rules="formRules">
                    <a-row>
                        <a-col span="8">
                            <a-form-model-item label="活动主题" prop="activityTheme">
                                <b-input v-model="form.activityTheme" :disabled="disabled" />
                            </a-form-model-item>
                        </a-col>
                        <a-col span="8">
                            <a-form-model-item label="层级" prop="level">
                                <BSelect disabled v-model="form.level" :list="options.level"></BSelect>
                            </a-form-model-item>
                        </a-col>
                        <a-col span="8">
                            <a-form-model-item label="工会组织" prop="orgId">
                                <SelectTreeUnion :disabled="disabled" v-model="form.orgId"
                                                 @getOption="getOption"
                                                 :is-auth="false"
                                ></SelectTreeUnion>
                            </a-form-model-item>
                        </a-col>
                        <a-col span="8">
                            <a-form-model-item label="活动时间" prop="activityTime">
                                <a-date-picker v-model="form.activityTime" valueFormat="x" :disabled="disabled" />
                            </a-form-model-item>
                        </a-col>
                        <a-col span="8">
                            <a-form-model-item label="活动地点" prop="activityAddress">
                                <b-input v-model="form.activityAddress" :disabled="disabled" />
                            </a-form-model-item>
                        </a-col>
                        <a-col span="24">
                            <a-form-model-item label="参加人员">
                                <a-tag class="mb10p" :closable="!disabled" :key="item.id"
                                       v-for="(item,index) of form.elegantDemeanourJoins"
                                       @close="form.elegantDemeanourJoins.splice(index, 1)"
                                >
                                    {{ item.name }}
                                </a-tag>
                                <a-tag
                                    v-if="!disabled"
                                    style="background: #fff; borderStyle: dashed;"
                                    @click="visible = true">
                                    <a-icon type="plus" />
                                    选择人员
                                </a-tag>
                                <!--                                <SelectUnionPeople-->
                                <!--                                    :disabled="disabled"-->
                                <!--                                    mode="multiple"-->
                                <!--                                    v-model="form.activityJoinDtos"-->
                                <!--                                    :orgId="form.orgId"></SelectUnionPeople>-->
                            </a-form-model-item>
                        </a-col>
                        <a-col span="24">
                            <a-form-model-item label="主要内容" prop="mainContent">
                                <b-textarea v-model="form.mainContent" :disabled="disabled" />
                            </a-form-model-item>
                        </a-col>
                        <a-col span="24">
                            <a-form-model-item label="附件" prop="fileInfoVos">
                                <b-upload businessCode="UN02" :fileList.sync="form.fileInfoVos"
                                          :disabled="disabled" />
                                <span v-if="!disabled"> 支持扩展名：.rar .zip .doc .docx .pdf .jpg...</span>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                </a-form-model>
            </a-card>
            <div class="tar page-btn-right-top">
                <a-button v-if="!disabled" type="primary" :loading="loading" @click="save" class="mr10p">提交</a-button>
                <a-button type="primary" @click="$close">关闭</a-button>
            </div>
        </div>
        <SelectPersonModal :isMutilple="true" :visible.sync="visible"
                           :persons.sync="form.elegantDemeanourJoins"></SelectPersonModal>
    </base-breadcrumb>
</template>

<script>

import SelectTreeUnion from '@/components/Select/SelectTreeUnion'
import SelectUnionPeople from '@/components/Select/SelectUnionPeople'
import SelectPersonModal from '@/components/SelectPersonModal'
import activityLogApi from '@/api/union/activityLogApi'
import BSelect from '@/components/BComponents/BSelect'

export default {
    name:'a'+Date.now(),
    components: {
        SelectTreeUnion,
        BSelect,
        SelectPersonModal
    },
    data() {
        return {
            loading: false,
            visible: false,
            form: {
                elegantDemeanourJoins: [],
                fileInfoVos: [],
                level: '',
                orgId: '',
                companyId: '',
                branchComId: '',
                projectId: ''
            },
            disabled: this.$route.query.detail == 1,
            formRules: {
                activityTheme: { required: true, message: '活动主题不能为空', trigger: 'blur' },
                activityType: { required: true, message: '活动类型不能为空', trigger: 'change' },
                activityTime: { required: true, message: '活动时间不能为空', trigger: 'change' },
                // level: { required: true, message: '层级不能为空', trigger: 'change' },
                orgId: { required: true, message: '工会组织不能为空', trigger: 'change' },
                activityAddress: { required: true, message: '活动地点不能为空', trigger: 'change' },
                elegantDemeanourJoins: { required: true, message: '参会人员不能为空', trigger: 'change' },
                fileInfoVos: { type: 'array', required: true, message: '附件不能为空', trigger: 'change' },
                mainContent: { required: true, message: '主要内容不能为空', trigger: 'change' }
            },
            options: {
                level: []
            }
        }
    },
    created: async function() {
        if (this.$route.query.id) {
            this.form.id = this.$route.query.id
            await this.getBaseInfo()
        }
        this.getTypeLabel({ type: 1 })
    },
    methods: {
        getOption(e) {
            if (!e) return
            let levelId = e.unionLevelId // 层级id
            this.form.level = levelId
            this.form.orgName = e.unionOrgName
            /**
             * 添加表单组织机构参数
             */
            // 公司级
            if (levelId === '605004340528287745') {
                this.form.companyId = e.id
                // 分公司级
            } else if (levelId === '605004401341501446') {
                this.form.branchComId = e.id
                this.form.companyId = e.parentId
                // 项目级
            } else if (levelId === '605004528177254447') {
                this.form.projectId = e.id
                this.form.branchComId = e.parentId
            }
        },
        async getTypeLabel(args) {
            const { unionApiUrl } = require('@/api/config.js')
            const Union = require('@/api/union').default
            const { getLabels } = new Union(unionApiUrl, 'queryTypesLabelList')
            let res = await getLabels(args)
            this.options.level = res.data
        },
        async getBaseInfo() {
            this.loading = true
            let res = await activityLogApi.findById({}, { id: this.form.id })
            if (res.code === this.SUCCESS_CODE) {
                this.form = res.data
                if (this.form.elegantDemeanourJoins) {
                    this.form.elegantDemeanourJoins = this.form.elegantDemeanourJoins.map(v => {
                        return {
                            name: v.joinName,
                            id: v.joinId,
                            userId: v.joinId
                        }
                    })
                } else {
                    this.form.elegantDemeanourJoins = []
                }
                this.$console(this.form)
                this.form.fileInfoVos = this.form.fileInfoVos ? this.form.fileInfoVos : []
            }
            this.loading = false
        },
        async save() {
            this.$refs.formRules.validate(async valid => {
                if (valid) {
                    this.loading = true
                    let temp = this.$clone(this.form)
                    temp.elegantDemeanourJoins = temp.elegantDemeanourJoins.map(v => {
                        return { joinId: v.userId }
                    })
                    let res
                    if (temp.id) {
                        res = await activityLogApi.update(temp)
                    } else {
                        res = await activityLogApi.add(temp)
                    }
                    if (res.code === 200) {
                        this.$message.success('保存成功')
                        this.form.id = res.data.id
                        await this.getBaseInfo()
                        this.$close()
                    }
                    this.loading = false
                } else {
                    this.$noticeWarning('请填写完整')
                }
            })
        }

    }
}
</script>
